.top,.bot{
    width: 1020px;
    height: 400px;
    margin: 0 auto;
}
.top{
    margin-bottom: 20px;
}
.t-left,.t-rig,.b-left,.b-rig{
    width: 500px;
    height: 100%;
    background-image: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/bg.jpg);
    float: left;
}
.t-left,.b-left{
    margin-right: 20px;
}
.t-left .one{
    width: 400px;
    height: 300px;
    background: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/con1-1.jpg) no-repeat ;
    background-size: 100% 100%;
    margin: 50px;
    transform-origin: left top;
    transition: 1s;
}
.t-left:hover .one{
    transform: scale(0.7);
}
.t-left{
    position: relative;
}
.t-left .six,.t-left .five,.t-left .four,.t-left .three,.t-left .two{
    height: 0;
}

.t-left .six{
    margin-right: 20px;
    background: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/con1-6.jpg);
    background-size: 100% 100%;
    position: absolute;
    left: 50px;
    top: 400px;
    transition: 1s 0.3s;
}
.t-left:hover .six{
    width: 130px;
    height: 80px;
    transform: translate(0,-120px);
}
.t-left .five{
    margin-right: 20px;
    background: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/con1-5.jpg);
    background-size: 100% 100%;
    position: absolute;
    left: 200px;
    top: 400px;
    transition: 1s 0.2s;
}
.t-left:hover .five{
    width: 130px;
    height: 80px;
    transform: translate(0,-120px);
}
.t-left .four{
    background: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/con1-4.jpg);
    background-size: 100% 100%;
    position: absolute;
    left: 350px;
    top: 400px;
    transition: 1s;
}
.t-left:hover .four{
    width: 130px;
    height: 80px;
    transform: translate(0,-120px);
}
.t-left .three{
    background: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/con1-3.jpg);
    background-size: 100% 100%;
    position: absolute;
    left: 500px;
    top: 270px;
    transition: 1s;
}
.t-left:hover .three{
    width: 130px;
    height: 80px;
    transform: translate(-150px,-100px);
}
.t-left .two{
    background: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/con1-2.jpg);
    background-size: 100% 100%;
    position: absolute;
    left: 350px;
    top: -130px;
    transition: 1s;
}
.t-left:hover .two{
    width: 130px;
    height: 80px;
    transform: translate(0 ,180px);
}


.t-rig .one{
    width: 400px;
    height: 300px;
    background: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/con2-1.jpg) no-repeat ;
    background-size: 100% 100%;
    margin: 50px;
    transform-origin: left top;
    transition: 1s;
}
.t-rig:hover .one{
    transform: scale(0.7);
}
.t-rig{
    position: relative;
}
.t-rig .six,.t-rig .five,.t-rig .four,.t-rig .three,.t-rig .two{
    height: 0;
}

.t-rig .six{
    margin-right: 20px;
    background: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/con2-6.jpg);
    background-size: 100% 100%;
    position: absolute;
    left: 50px;
    top: 400px;
    transition: 1s 0.3s;
}
.t-rig:hover .six{
    width: 130px;
    height: 80px;
    transform: translate(0,-120px);
}
.t-rig .five{
    margin-right: 20px;
    background: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/con2-5.jpg);
    background-size: 100% 100%;
    position: absolute;
    left: 200px;
    top: 400px;
    transition: 1s 0.2s;
}
.t-rig:hover .five{
    width: 130px;
    height: 80px;
    transform: translate(0,-120px);
}
.t-rig .four{
    background: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/con2-4.jpg);
    background-size: 100% 100%;
    position: absolute;
    left: 350px;
    top: 400px;
    transition: 1s;
}
.t-rig:hover .four{
    width: 130px;
    height: 80px;
    transform: translate(0,-120px);
}
.t-rig .three{
    background: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/con2-3.jpg);
    background-size: 100% 100%;
    position: absolute;
    left: 500px;
    top: 270px;
    transition: 1s;
}
.t-rig:hover .three{
    width: 130px;
    height: 80px;
    transform: translate(-150px,-100px);
}
.t-rig .two{
    background: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/con2-2.jpg);
    background-size: 100% 100%;
    position: absolute;
    left: 350px;
    top: -130px;
    transition: 1s;
}
.t-rig:hover .two{
    width: 130px;
    height: 80px;
    transform: translate(0 ,180px);
}



.b-left .one{
    width: 400px;
    height: 300px;
    background: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/con3-1.jpg) no-repeat ;
    background-size: 100% 100%;
    margin: 50px;
    transform-origin: left top;
    transition: 1s;
}
.b-left:hover .one{
    transform: scale(0.7);
}
.b-left{
    position: relative;
}
.b-left .six,.b-left .five,.b-left .four,.b-left .three,.b-left .two{
    height: 0;
}

.b-left .six{
    margin-right: 20px;
    background: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/con3-6.jpg);
    background-size: 100% 100%;
    position: absolute;
    left: 50px;
    top: 400px;
    transition: 1s 0.3s;
}
.b-left:hover .six{
    width: 130px;
    height: 80px;
    transform: translate(0,-120px);
}
.b-left .five{
    margin-right: 20px;
    background: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/con3-5.jpg);
    background-size: 100% 100%;
    position: absolute;
    left: 200px;
    top: 400px;
    transition: 1s 0.2s;
}
.b-left:hover .five{
    width: 130px;
    height: 80px;
    transform: translate(0,-120px);
}
.b-left .four{
    background: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/con3-4.jpg);
    background-size: 100% 100%;
    position: absolute;
    left: 350px;
    top: 400px;
    transition: 1s;
}
.b-left:hover .four{
    width: 130px;
    height: 80px;
    transform: translate(0,-120px);
}
.b-left .three{
    background: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/con3-3.jpg);
    background-size: 100% 100%;
    position: absolute;
    left: 500px;
    top: 270px;
    transition: 1s;
}
.b-left:hover .three{
    width: 130px;
    height: 80px;
    transform: translate(-150px,-100px);
}
.b-left .two{
    background: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/con3-2.jpg);
    background-size: 100% 100%;
    position: absolute;
    left: 350px;
    top: -130px;
    transition: 1s;
}
.b-left:hover .two{
    width: 130px;
    height: 80px;
    transform: translate(0 ,180px);
}

.b-rig{
    position: relative;
}
.b-rig .one{
    width: 250px;
    height: 300px;
    margin: 50px auto;
    background: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/con4-1.jpg) no-repeat;
    background-size: 100% 100%;
    transition: 1s;
}
.b-rig:hover .one{
    transform: translate(-120px,0);
}
.b-rig .two{
    height: 0;
    position: absolute;
    left: 500px;
    top: -145px;
    background: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/con4-2.jpg) no-repeat;
    background-size: 100% 100%;
    transition: 1s;
}
.b-rig .three{
    height: 0;
    position: absolute;
    left: 500px;
    top: 400px;
    background: url(../../前锋教育资料/课程/day15/03_作业/03-课后作业/作业2/images/con4-3.jpg) no-repeat;
    background-size: 100% 100%;
    transition: 1s;
}
.b-rig:hover .two{
    width: 100px;
    height: 145px;
    transform: translate(-170px,195px);
}
.b-rig:hover .three{
    width: 100px;
    height: 145px;
    transform: translate(-170px,-195px);
}